<template>
  <div class="body">
    <table-msg ref="tableMsg"
               :insert-button="true"
               insert-button-text="添加标签"
               :columns="columns"
               :request_value="request_value"
               @insert="insertLabel"
               @update="updateLabel"
               @delete="deleteLabel"
               @Reset="resetLabel"
    />
    <label-insert-form ref="insertForm"/>
    <label-modify-form ref="modifyForm"/>
  </div>
</template>

<script>
import TableMsg from '@/components/table/TableMsg'
import { ref } from 'vue'
import { labelDelete, labelList, labelReset } from '@/api/label'
import LabelInsertForm from '@/views/administrator/label/form/label-insert-form'
import LabelModifyForm from '@/views/administrator/label/form/label-modify-form'
export default {
  name: 'label-management',
  components: { LabelInsertForm, LabelModifyForm, TableMsg },
  setup () {
    const columns = [
      { prop: 'name', label: '标签名' },
      { prop: 'status', label: '状态', type: 'status', status: ['ENABLE', 'DELETED'], tag: [0, 2] },
      { prop: 'option', label: '操作', type: 'option', width: 250, option: { update: true, delete: true, reset: true } }
    ]
    return {
      columns,
      request_value: ref({ })
    }
  },
  methods: {
    getLabelAllList (val) {
      let page = this.$refs.tableMsg.getPage
      if (val) {
        page = val
      }
      labelList(page).then(value => {
        console.log('classification', value)
        this.request_value = value
      })
    },
    insertLabel () {
      this.$refs.insertForm.dialogVisible = true
      this.$refs.insertForm.data = {}
    },
    updateLabel (val) {
      console.log(val)
      this.$refs.modifyForm.dialogVisible = true
      this.$refs.modifyForm.data = val
    },
    deleteLabel (val) {
      labelDelete(val).then(value => {
        this.getLabelAllList()
      })
    },
    resetLabel (val) {
      labelReset(val).then(value => {
        this.getLabelAllList()
      })
    }
  },
  mounted () {
    this.getLabelAllList()
  }
}
</script>

<style scoped>

</style>
